<template>
  <n-grid x-gap="12" :cols="4">
    <n-gi :span="2">
      <n-card title="操作收益分布" class="h-full">
        <v-chart autoresize :option="options" class="h-chart-height"></v-chart>
      </n-card>
    </n-gi>
    <n-gi :span="2">
      <n-grid y-gap="12" :cols="4" class="h-full">
        <n-gi :span="4">
          <n-card title="购买最多股票信息" class="h-full">
            <div class="flex items-center justify-center h-full">
              <span class="text-3xl">
                <span class="font-bold text-4xl mx-2">{{ operation_result.name }}</span><span
                  class="font-bold text-2xl text-stone-400">{{
    operation_result.max_stock_code }}</span>
              </span>
            </div>
          </n-card>
        </n-gi>
        <n-gi :span="4">
          <n-card title="购买信息统计" class="h-full ">
            <div class="flex items-center justify-center h-full">
              <span class="text-3xl">
                共购买了<span class="font-bold text-4xl text-red-500">{{ operation_result.count }}</span>次，总计<span
                  class="font-bold text-4xl text-red-500">{{
                  operation_result.amount }}</span>只
              </span>
            </div>


          </n-card>
        </n-gi>
      </n-grid>



    </n-gi>
  </n-grid>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import VChart from 'vue-echarts';
const props = defineProps(['operation_return', 'operation_result'])
const operation_return = props.operation_return;

const options = ref({
  title: {
    text: '操作收益分布',
    subtext: '每次操作后收益变化',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})



onMounted(() => {
  options.value.series[0].data.splice(0, options.value.series[0].data.length)
  options.value.series[0].data.push({
    value: operation_return.empty,
    name: '未操作天数'
  })
  options.value.series[0].data.push({
    value: operation_return.increase,
    name: '操作后盈利天数'
  })
  options.value.series[0].data.push({
    value: operation_return.decrease,
    name: '操作后亏损天数'
  })

})
</script>